<template>
	<view v-if="visible" class="modal-overlay" @click="closeModal">
		<view class="modal-content" @click.stop>
			<!-- 弹窗头部 -->
			<view class="modal-header">
				<text class="modal-title">{{isEdit ? '编辑记录' : '记一笔'}}</text>
				<view class="close-btn" @click="closeModal">
					<text class="close-icon">×</text>
				</view>
			</view>

			<!-- 弹窗内容 -->
			<scroll-view class="modal-body" scroll-y show-scrollbar="false">

				<!-- 类型选择 -->
				<view class="type-selector">
					<view 
						:class="['type-item', recordType === 'expense' ? 'active' : '']" 
						@click="selectType('expense')"
					>
						<text class="type-icon">💸</text>
						<text class="type-text">支出</text>
					</view>
					<view 
						:class="['type-item', recordType === 'income' ? 'active' : '' ]" 
						@click="selectType('income')"
					>
						<text class="type-icon">💰</text>
						<text class="type-text">收入</text>
					</view>
				</view>

				<!-- 金额输入 -->
				<view class="amount-section">
					<view class="currency-symbol">¥</view>
					<input 
						class="amount-input" 
						type="digit" 
						v-model="amount" 
						placeholder="0.00"
						@input="onAmountInput"
					/>
				</view>

				<!-- 分类选择 -->
				<view class="category-section">
					<view class="section-title">选择分类</view>
					<view class="category-grid"> 
						<view 
							v-for="(category, index) in currentCategories" 
							:key="index"
							:class="['category-item', selectedCategory === category.name ? 'selected' : '']"
							@click="selectCategory(category.name)"
						>
							<text class="category-icon">{{category.icon}}</text>
							<text class="category-name">{{category.name}}</text>
						</view>
					</view>
				</view>

				<!-- 账户选择 -->
				<view class="account-section">
					<view class="section-title">选择账户</view>
					<view class="account-selector">
						<view class="account-picker" @click="showAccountPicker">
							<text class="account-icon">{{selectedAccount.icon || '📝'}}</text>
							<text class="account-name">{{selectedAccount.name || '不计入账户'}}</text>
							<text class="picker-arrow" :class="{ 'rotated': showAccountOptions }">›</text>
						</view>
						
						<!-- 账户选择下拉框 -->
						<view v-if="showAccountOptions" class="account-dropdown">
							<view 
								v-for="(account, index) in accountOptions" 
								:key="index"
								class="account-option"
								:class="{ 'selected': selectedAccountIndex === index }"
								@click="selectAccount(index)"
							>
								<text class="option-icon">{{account.icon}}</text>
								<text class="option-name">{{account.name}}</text>
								<text v-if="selectedAccountIndex === index" class="option-check">✓</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 备注输入 -->
				<view class="note-section">
					<view class="section-title">备注</view>
					<input 
						class="note-input" 
						type="text" 
						v-model="note" 
						placeholder="添加备注..."
						maxlength="50"
					/>
				</view>

				<!-- 日期选择 -->
				<view class="date-section">
					<view class="section-title">日期</view>
					<uni-datetime-picker 
						type="date" 
						:value="selectedDate" 
						@change="onDatetimeChange"
						:start="'2020-01-01'"
						:end="'2030-01-01'"
						return-type="string"
					>
						<view class="date-display">
							<text class="date-text">{{ formatDate(selectedDate) }}</text>
						</view>
					</uni-datetime-picker>
				</view>
			</scroll-view>

			<!-- 弹窗底部操作按钮 -->
			<view class="modal-footer">
				<button 
					v-if="isEdit"
					class="delete-btn" 
					@click="deleteRecord"
				>
					删除记录
				</button>
				<button 
					class="save-btn" 
					:disabled="!canSave"
					@click="saveRecord"
				>
					{{isEdit ? '更新' : '保存'}}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { recordAPI, categoryAPI, accountAPI, apiUtils } from '@/utils/api.js'
	import uniDatetimePicker from '@dcloudio/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue'
	
	export default {
		name: 'AddRecordModal',
		components: {
			uniDatetimePicker
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			editRecord: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				isEdit: false,
				editId: null,
				recordType: 'expense',
				amount: '',
				selectedCategory: '',
				selectedAccount: { id: null, name: '不计入账户', icon: '📝', accountType: 'NOT_COUNTED' },
				selectedAccountIndex: 0,
				note: '',
				selectedDate: this.getDefaultDate(), // 默认今天
				expenseCategories: [],
				incomeCategories: [],
				accounts: [],
				accountOptions: [],
				showAccountOptions: false
			}
		},
		computed: {
			currentCategories() {
				return this.recordType === 'expense' ? this.expenseCategories : this.incomeCategories
			},
			canSave() {
				const result = this.amount && this.selectedCategory
				return result
			},
		},
		watch: {
			visible(newVal) {
				if (newVal) {
					this.initModal()
				}
			},
			editRecord(newVal) {
				if (newVal) {
					this.loadRecordForEdit(newVal)
				}
			}
		},
		mounted() {
			this.loadCategories()
			this.loadAccounts()
		},
		methods: {
			getDefaultDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			initModal() {
				if (this.editRecord) {
					this.isEdit = true
					this.editId = this.editRecord.id
					this.loadRecordForEdit(this.editRecord)
				} else {
					this.isEdit = false
					this.editId = null
					this.resetForm()
				}
			},
			async loadCategories() {
				try {
					// 获取支出分类
					const expenseCategories = await categoryAPI.getByType('EXPENSE')
					this.expenseCategories = expenseCategories.map(cat => ({
						id: cat.id,
						name: cat.name,
						icon: this.getIconEmoji(cat.icon),
						type: 'EXPENSE' // 添加类型信息
					}))
					
					// 获取收入分类
					const incomeCategories = await categoryAPI.getByType('INCOME')
					this.incomeCategories = incomeCategories.map(cat => ({
						id: cat.id,
						name: cat.name,
						icon: this.getIconEmoji(cat.icon),
						type: 'INCOME' // 添加类型信息
					}))
					
					console.log('加载的分类数据:', {
						expense: this.expenseCategories,
						income: this.incomeCategories
					})
					
					// 默认选择第一个分类
					if (this.currentCategories.length > 0) {
						this.selectedCategory = this.currentCategories[0].name
					}
				} catch (error) {
					console.error('加载分类失败:', error)
					// 如果API失败，使用默认分类
					this.loadDefaultCategories()
				}
			},
			getIconEmoji(iconName) {
				// 图标名称到emoji的映射
				const iconMap = {
					// 收入分类
					'money': '💰',
					'gift': '🎁',
					'trending-up': '📈',
					'briefcase': '💼',
					'bar-chart': '📊',
					
					// 支出分类
					'restaurant': '🍽️',
					'car': '🚗',
					'shopping-cart': '🛒',
					'gamepad': '🎮',
					'medical': '🏥',
					'book': '📚',
					'home': '🏠',
					'list': '📝'
				}
				
				return iconMap[iconName] || '📝' // 默认图标
			},
			loadDefaultCategories() {
				// 默认支出分类
				this.expenseCategories = [
					{ id: 6, name: '餐饮', icon: '🍽️', type: 'EXPENSE' },
					{ id: 7, name: '交通', icon: '🚗', type: 'EXPENSE' },
					{ id: 8, name: '购物', icon: '🛒', type: 'EXPENSE' },
					{ id: 9, name: '娱乐', icon: '🎮', type: 'EXPENSE' },
					{ id: 10, name: '医疗', icon: '🏥', type: 'EXPENSE' },
					{ id: 11, name: '教育', icon: '📚', type: 'EXPENSE' },
					{ id: 12, name: '住房', icon: '🏠', type: 'EXPENSE' },
					{ id: 13, name: '其他支出', icon: '📝', type: 'EXPENSE' }
				]
				
				// 默认收入分类
				this.incomeCategories = [
					{ id: 1, name: '工资', icon: '💰', type: 'INCOME' },
					{ id: 2, name: '奖金', icon: '🎁', type: 'INCOME' },
					{ id: 3, name: '投资', icon: '📈', type: 'INCOME' },
					{ id: 4, name: '兼职', icon: '💼', type: 'INCOME' },
					{ id: 5, name: '其他收入', icon: '📊', type: 'INCOME' }
				]
				
				// 默认选择第一个分类
				if (this.currentCategories.length > 0) {
					this.selectedCategory = this.currentCategories[0].name
				}
			},
			async loadAccounts() {
				try {
					// 获取用户账户
					const accounts = await accountAPI.getAccounts()
					this.accounts = accounts || []
					
					// 创建账户选项数组，包含"不计入账户"选项
					this.accountOptions = [
						{ id: null, name: '不计入账户', icon: '📝', accountType: 'NOT_COUNTED' },
						...this.accounts
					]
					
					// 默认选择"不计入账户"
					this.selectedAccountIndex = 0
					this.selectedAccount = this.accountOptions[0]
				} catch (error) {
					// 如果加载失败，仍然提供默认选项
					this.accountOptions = [
						{ id: null, name: '不计入账户', icon: '📝', accountType: 'NOT_COUNTED' }
					]
					this.selectedAccountIndex = 0
					this.selectedAccount = this.accountOptions[0]
				}
			},
			showAccountPicker() {
				console.log('显示账户选择器:', {
					selectedAccountIndex: this.selectedAccountIndex,
					selectedAccount: this.selectedAccount,
					accountOptions: this.accountOptions
				})
				this.showAccountOptions = !this.showAccountOptions
			},
			selectAccount(index) {
				console.log('选择账户:', index, this.accountOptions[index])
				this.selectedAccountIndex = index
				this.selectedAccount = this.accountOptions[index]
				this.showAccountOptions = false
				
				console.log('更新后的选中账户:', this.selectedAccount)
			},
			loadRecordForEdit(record) {
				console.log('加载编辑记录数据:', record)
				
				if (record) {
					this.recordType = (record.recordType || record.type || 'expense').toLowerCase()
					this.amount = (record.amount || 0).toString()
					this.selectedCategory = record.category?.name || record.categoryName || record.category || ''
					this.note = record.note || record.description || ''
					this.selectedDate = record.recordDate || record.date || this.formatDateForPicker(new Date())
					
					console.log('编辑记录基本信息:', {
						recordType: this.recordType,
						amount: this.amount,
						selectedCategory: this.selectedCategory,
						note: this.note,
						selectedDate: this.selectedDate
					})
					
					// 加载账户信息
					this.loadAccountForEdit(record)
					
					// 等待分类加载完成后再设置分类
					this.$nextTick(() => {
						this.loadCategoryForEdit(record)
					})
					
					// 强制更新组件
					this.$forceUpdate()
				} else {
					console.error('没有接收到编辑记录数据')
				}
			},
			
			// 加载编辑记录的分类信息
			loadCategoryForEdit(record) {
				console.log('加载分类信息:', {
					category: record.category,
					categoryName: record.categoryName,
					categoryId: record.categoryId,
					currentCategories: this.currentCategories
				})
				
				// 确保分类名称在当前分类列表中
				const categoryName = record.category?.name || record.categoryName || record.category || ''
				if (categoryName && this.currentCategories.length > 0) {
					const foundCategory = this.currentCategories.find(cat => cat.name === categoryName)
					if (foundCategory) {
						this.selectedCategory = categoryName
						console.log('找到匹配的分类:', categoryName)
					} else {
						// 如果找不到匹配的分类，选择第一个
						this.selectedCategory = this.currentCategories[0].name
						console.log('未找到匹配分类，使用第一个:', this.selectedCategory)
					}
				} else if (this.currentCategories.length > 0) {
					// 如果没有分类信息，选择第一个
					this.selectedCategory = this.currentCategories[0].name
					console.log('没有分类信息，使用第一个:', this.selectedCategory)
				}
			},
			
			// 加载编辑记录的账户信息
			loadAccountForEdit(record) {
				console.log('加载账户信息:', {
					account: record.account,
					accountId: record.accountId,
					accountName: record.accountName,
					accountType: record.accountType,
					accountOptions: this.accountOptions
				})
				
				// 等待账户选项加载完成
				this.$nextTick(() => {
					let foundAccount = false
					
					// 首先检查是否应该选择"不计入账户"
					if (!record.accountId && (!record.account || !record.account.id)) {
						this.selectedAccountIndex = 0
						this.selectedAccount = this.accountOptions[0] // 第一个选项是"不计入账户"
						console.log('没有账户ID，选择不计入账户')
						return
					}
					
					// 1. 如果有完整的账户对象
					if (record.account && record.account.id) {
						const accountIndex = this.accountOptions.findIndex(account => 
							account.id === record.account.id
						)
						
						if (accountIndex !== -1) {
							this.selectedAccountIndex = accountIndex
							this.selectedAccount = this.accountOptions[accountIndex]
							foundAccount = true
							console.log('找到完整账户对象:', this.selectedAccount)
						}
					}
					
					// 2. 如果只有账户ID
					if (!foundAccount && record.accountId) {
						const accountIndex = this.accountOptions.findIndex(account => 
							account.id === record.accountId
						)
						
						if (accountIndex !== -1) {
							this.selectedAccountIndex = accountIndex
							this.selectedAccount = this.accountOptions[accountIndex]
							foundAccount = true
							console.log('通过ID找到账户:', this.selectedAccount)
						}
					}
					
					// 3. 如果有账户名称和类型，尝试匹配
					if (!foundAccount && record.accountName && record.accountType) {
						const accountIndex = this.accountOptions.findIndex(account => 
							account.name === record.accountName && account.accountType === record.accountType
						)
						
						if (accountIndex !== -1) {
							this.selectedAccountIndex = accountIndex
							this.selectedAccount = this.accountOptions[accountIndex]
							foundAccount = true
							console.log('通过名称和类型找到账户:', this.selectedAccount)
						}
					}
					
					// 4. 如果都没找到，使用默认的"不计入账户"
					if (!foundAccount) {
						this.selectedAccountIndex = 0
						this.selectedAccount = this.accountOptions[0]
						console.log('未找到匹配账户，使用默认:', this.selectedAccount)
					}
					
					console.log('最终选择的账户:', {
						index: this.selectedAccountIndex,
						account: this.selectedAccount
					})
				})
			},
			selectType(type) {
				this.recordType = type
				// 如果当前选择的分类不在新类型中，则选择第一个
				const newCategories = this.currentCategories
				if (newCategories.length > 0 && !newCategories.find(cat => cat.name === this.selectedCategory)) {
					this.selectedCategory = newCategories[0].name
				}
			},
			selectCategory(categoryName) {
				this.selectedCategory = categoryName
			},
			onAmountInput(e) {
				// 限制只能输入数字和小数点
				let value = e.detail.value
				value = value.replace(/[^\d.]/g, '')
				
				// 限制只能有一个小数点
				const dotIndex = value.indexOf('.')
				if (dotIndex !== -1) {
					const beforeDot = value.substring(0, dotIndex)
					const afterDot = value.substring(dotIndex + 1)
					value = beforeDot + '.' + afterDot.replace(/\./g, '')
				}
				
				// 限制小数点后两位
				if (dotIndex !== -1 && value.substring(dotIndex + 1).length > 2) {
					value = value.substring(0, dotIndex + 3)
				}
				
				this.amount = value
			},
			onDatetimeChange(e) {
				this.selectedDate = e
			},
			formatDateForPicker(date) {		
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			formatDate(dateString) {
				const date = new Date(dateString)
				const today = new Date()
				const yesterday = new Date(today)
				yesterday.setDate(yesterday.getDate() - 1)
				
				if (date.toDateString() === today.toDateString()) {
					return '今天'
				} else if (date.toDateString() === yesterday.toDateString()) {
					return '昨天'
				} else {
					return `${date.getMonth() + 1}月${date.getDate()}日`
				}
			},
			async saveRecord() {
				if (!this.canSave) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				
				// 验证金额
				const amount = parseFloat(this.amount)
				if (isNaN(amount) || amount <= 0) {
					uni.showToast({
						title: '请输入有效的金额',
						icon: 'none'
					})
					return
				}
				
				if (amount > 999999.99) {
					uni.showToast({
						title: '金额不能超过999999.99',
						icon: 'none'
					})
					return
				}
				
				try {
					// 获取分类ID
					const category = this.currentCategories.find(cat => cat.name === this.selectedCategory)
					if (!category) {
						uni.showToast({
							title: '分类不存在',
							icon: 'none'
						})
						return
					}
					
					// 前端验证：分类类型与记录类型是否匹配
					if (category.type !== this.recordType.toUpperCase()) {
						uni.showToast({
							title: '分类类型与记录类型不匹配',
							icon: 'none'
						})
						return
					}

					const recordData = {
						recordType: this.recordType.toUpperCase(),
						amount: parseFloat(this.amount),
						categoryId: category.id,
						accountId: this.selectedAccount?.id || null,
						note: this.note,
						recordDate: this.selectedDate
					}
					
					console.log('保存记录数据:', {
						selectedAccount: this.selectedAccount,
						accountId: recordData.accountId,
						recordData: recordData
					})
					
					if (this.isEdit) {
						// 更新记录
						await recordAPI.update(this.editId, recordData)
						uni.showToast({
							title: '更新成功',
							icon: 'success'
						})
					} else {
						// 添加新记录
						await recordAPI.add(recordData)
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
					}
					
					// 触发保存成功事件，传递账户信息用于更新
					this.$emit('save-success', {
						accountId: recordData.accountId,
						amount: recordData.amount,
						isIncome: recordData.recordType === 'INCOME',
						isEdit: this.isEdit
					})
					
					// 关闭弹窗
					setTimeout(() => {
						this.closeModal()
					}, 1500)
					
				} catch (error) {
					console.error('保存记录失败:', error)
					
					let errorMessage = '操作失败，请重试'
					if (error.message) {
						if (error.message.includes('余额不足')) {
							errorMessage = '账户余额不足'
						} else if (error.message.includes('网络')) {
							errorMessage = '网络连接失败，请检查网络'
						} else if (error.message.includes('401')) {
							errorMessage = '登录已过期，请重新登录'
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}, 1500)
						} else {
							errorMessage = error.message
						}
					}
					
					uni.showToast({
						title: errorMessage,
						icon: 'none',
						duration: 3000
					})
				}
			},
			deleteRecord() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条记录吗？删除后无法恢复。',
					success: async (res) => {
						if (res.confirm) {
							try {
								await recordAPI.delete(this.editId)
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
								
								// 触发删除成功事件
								this.$emit('delete-success')
								
								// 关闭弹窗
								setTimeout(() => {
									this.closeModal()
								}, 1500)
							} catch (error) {
								console.error('删除记录失败:', error)
								uni.showToast({
									title: error.message || '删除失败，请重试',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			resetForm() {
				this.amount = ''
				this.note = ''
				const now = new Date()
				this.selectedDate = this.formatDateForPicker(now)
				this.recordType = 'expense'
				// 根据记录类型选择默认分类
				if (this.recordType === 'expense' && this.expenseCategories.length > 0) {
					this.selectedCategory = this.expenseCategories[0].name
				} else if (this.recordType === 'income' && this.incomeCategories.length > 0) {
					this.selectedCategory = this.incomeCategories[0].name
				} else {
					this.selectedCategory = '' // 没有可选分类时清空
				}
			},
			closeModal() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/uni.scss';
	
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 10000;
		animation: fadeIn 0.3s ease-out;
	}

	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	.modal-content {
		width: 100%;
		max-height: 90vh;
		background: $cute-bg-primary;
		border-radius: $cute-border-radius 0 0 0;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
		overflow: visible;
		animation: slideUp 0.3s ease-out;
		position: relative;
	}

	@keyframes slideUp {
		from { transform: translateY(100%); opacity: 0; }
		to { transform: translateY(0); opacity: 1; }
	}

	.modal-header {
		background: $cute-gradient-primary;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: $cute-text-inverse;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.close-btn {
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: $cute-transition;
		
		&:active {
			transform: scale(0.9);
			background: rgba(255, 255, 255, 0.3);
		}
	}

	.close-icon {
		font-size: 40rpx;
		font-weight: bold;
	}

	.modal-body {
		max-height: 60vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 30rpx;
        width: 100%;
        box-sizing: border-box;
		overflow: visible;
		/* 隐藏滚动条 */
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE 10+ */
		position: relative;
	}
	
	.modal-body::-webkit-scrollbar {
		display: none; /* Chrome/Safari/Webkit */
	}
	
	/* 针对scroll-view的滚动条隐藏 */
	.modal-body :deep(.uni-scroll-view) {
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
	}
	
	.modal-body :deep(.uni-scroll-view::-webkit-scrollbar) {
		display: none !important;
	}

	/* 类型选择 */
	.type-selector {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		gap: 20rpx;
		width: 100%;
	}

	.type-item {
		flex: 1;
		text-align: center;
		padding: 25rpx 20rpx;
		border-radius: $cute-border-radius;
		background: $cute-bg-tertiary;
		border: 2rpx solid transparent;
		transition: $cute-transition;
		
		&.active {
			background: $cute-gradient-accent;
			color: $cute-text-inverse;
			border-color: $cute-accent;
			box-shadow: $cute-button-shadow;
		}
		
		&:active {
			transform: scale(0.98);
		}
	}

	.type-icon {
		font-size: 40rpx;
		margin-bottom: 10rpx;
		display: block;
	}

	.type-text {
		font-size: 26rpx;
		font-weight: 600;
	}

	/* 金额输入 */
	.amount-section {
		text-align: center;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		border: 2rpx solid $cute-border;
		width: 100%;
		box-sizing: border-box;
	}

	.currency-symbol {
		font-size: 48rpx;
		color: $cute-text-primary;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.amount-input {
		width: 100%;
		height: 100rpx;
		border: 3rpx solid $cute-border;
		border-radius: $cute-border-radius;
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		background: $cute-bg-primary;
		color: $cute-text-primary;
		box-sizing: border-box;
		transition: $cute-transition;
		
		&:focus {
			border-color: $cute-accent;
			box-shadow: 0 0 0 6rpx rgba(255, 182, 193, 0.2);
		}
	}

	/* 分类选择 */
	.category-section {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: $cute-text-primary;
		margin-bottom: 20rpx;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			bottom: -6rpx;
			left: 0;
			width: 100%;
			height: 3rpx;
			background: $cute-gradient-accent;
			border-radius: 2rpx;
		}
	}

	.category-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15rpx;
		width: 100%;
	}

	.category-item {
		text-align: center;
		padding: 25rpx 15rpx;
		border-radius: $cute-border-radius;
		background: $cute-bg-primary;
		border: 2rpx solid $cute-border;
		transition: $cute-transition;
		
		&.selected {
			background: $cute-gradient-primary;
			color: $cute-text-inverse;
			border-color: $cute-primary;
			box-shadow: $cute-button-shadow;
		}
		
		&:active {
			transform: scale(0.98);
		}
	}

	.category-icon {
		font-size: 32rpx;
		margin-bottom: 10rpx;
		display: block;
	}

	.category-name {
		font-size: 22rpx;
		text-align: center;
		font-weight: 500;
	}

	/* 账户选择 */
	.account-section {
		margin-bottom: 30rpx;
		width: 100%;
	}
	
	.account-selector {
		margin-top: 20rpx;
		position: relative;
	}
	
	.account-picker {
		display: flex;
		align-items: center;
		padding: 25rpx;
		background: $cute-bg-tertiary;
		border-radius: $cute-border-radius;
		border: 2rpx solid $cute-border;
		transition: $cute-transition;
		position: relative;
		
		&:active {
			transform: $cute-active-transform;
			background: $cute-bg-primary;
		}
	}
	
	.account-icon {
		font-size: 36rpx;
		margin-right: 20rpx;
	}
	
	.account-name {
		flex: 1;
		font-size: 30rpx;
		color: $cute-text-primary;
		font-weight: 500;
	}
	
	.picker-arrow {
		font-size: 32rpx;
		color: $cute-text-tertiary;
		transform: rotate(90deg);
		transition: $cute-transition;
		
		&.rotated {
			transform: rotate(270deg);
		}
	}
	
	.account-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: $cute-bg-secondary;
		border: 2rpx solid $cute-border;
		border-radius: $cute-border-radius;
		box-shadow: $cute-card-shadow;
		z-index: 10002;
		max-height: 300rpx;
		overflow-y: auto;
	}
	
	.account-option {
		display: flex;
		align-items: center;
		padding: 25rpx;
		border-bottom: 1rpx solid $cute-divider;
		transition: $cute-transition;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:active {
			background: $cute-bg-tertiary;
		}
		
		&.selected {
			background-color: $cute-primary;
			color: white;
			
			.option-icon,
			.option-name,
			.option-check {
				color: white;
			}
		}
	}
	
	.option-icon {
		font-size: 32rpx;
		margin-right: 20rpx;
	}
	
	.option-name {
		flex: 1;
		font-size: 28rpx;
		color: $cute-text-primary;
	}
	
	.option-check {
		font-size: 28rpx;
		color: $cute-primary;
		font-weight: bold;
	}

	/* 备注输入 */
	.note-section {
		margin-bottom: 30rpx;
		width: 100%;
	}

	.note-input {
		width: 100%;
		height: 70rpx;
		border: 2rpx solid $cute-border;
		border-radius: $cute-border-radius;
		padding: 0 20rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		background: $cute-bg-primary;
		color: $cute-text-primary;
		transition: $cute-transition;
		
		&:focus {
			border-color: $cute-accent;
			box-shadow: 0 0 0 4rpx rgba(255, 182, 193, 0.2);
		}
	}

	/* 日期选择 */
	.date-section {
		margin-bottom: 30rpx;
		width: 100%;
		position: relative;
		z-index: 1000;
	}
	
	/* 日期显示区域 */
	.date-display {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 70rpx;
		border: 2rpx solid $cute-border;
		border-radius: $cute-border-radius;
		padding: 0 20rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		background: $cute-bg-primary;
		color: $cute-text-primary;
		transition: $cute-transition;
		
		&:active {
			transform: $cute-active-transform;
			background: $cute-bg-primary;
		}
	}
	
	.date-text {
		font-size: 30rpx; /* Changed from 26rpx */
		color: $cute-text-primary;
		font-weight: 500;
	}

	/* 弹窗底部操作按钮 */
	.modal-footer {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		gap: 20rpx;
		background: $cute-bg-secondary;
		border-top: 2rpx solid $cute-border;
	}

	.delete-btn {
		flex: 1;
		height: 80rpx;
		background: linear-gradient(135deg, $cute-error, #ff8a8a);
		color: $cute-text-inverse;
		border: none;
		border-radius: $cute-border-radius;
		font-size: 28rpx;
		font-weight: bold;
		box-shadow: $cute-button-shadow;
		transition: $cute-transition;
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.4);
		}
	}

	.save-btn {
		flex: 1;
		height: 80rpx;
		background: $cute-gradient-primary;
		color: $cute-text-inverse;
		border: none;
		border-radius: $cute-border-radius;
		font-size: 28rpx;
		font-weight: bold;
		box-shadow: $cute-button-shadow;
		transition: $cute-transition;
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 16rpx rgba(144, 238, 144, 0.4);
		}
		
		&:disabled {
			background: $cute-bg-tertiary;
			color: $cute-text-tertiary;
			box-shadow: none;
			transform: none;
		}
	}
</style>
